<template>
  <div class="join-box">
    <div class="join-box-title" v-if="type == 'show'">链接</div>
    <div v-else class="box">
      <div class="header">
        <div class="title">{{ joinData.joinName || '链接' }}</div>
        <div class="btn" @click="handleEdit">
          <el-icon><Edit /></el-icon>
        </div>
        <div class="btn" @click="handleDelete">
          <el-icon color="red"><Delete /></el-icon>
        </div>
      </div>
      <div class="box-content">
        <div class="box-content-item">
          <div>链接：</div>
          <div>
            <el-tag type="warning" v-for="(item, index) in joinData.joinRelation" :key="index">
              {{ `${item.source} ${item.label} ${item.target}` }}
            </el-tag>
          </div>
        </div>
        <div class="box-content-item">
          <div>字段：</div>
          <div>
            <el-tag v-for="(item, index) in joinData.choosedFields" :key="index">{{ item.COLUMN_NAME }}</el-tag>
          </div>
        </div>
        <div class="box-content-item">
          <div>条件：</div>
          <div>
            <el-tree
              style="width: 100%"
              empty-text="暂无条件"
              v-if="joinData.condition"
              :data="getConditionTreeData(joinData.condition)"
              :props="{ label: 'sql' }"
            />
          </div>
        </div>
      </div>
    </div>
    <JoinDialog
      v-if="isShowDialog"
      :joinNodes="joinNodes"
      :data="joinData"
      @create="joinCreate"
      v-model:visible="isShowDialog"
    />
  </div>
</template>

<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import JoinDialog from './joinDialog.vue'
import { useAntvStore } from '@/store/modules/antvStore'
import { getConditionTreeData } from '../index'
const antvStore = useAntvStore()
const getNode = inject('getNode')
const isShowDialog = ref(false)
const joinNodes = ref([])
const joinData = ref({})
const currentJoinNodes = ref([])
const prop = defineProps({
  type: {
    type: String,
    default: 'default'
  }
})
onMounted(() => {
  const node = getNode ? getNode() : ''
  if (node) {
    console.log(node)
    if (node.data?.joinName) {
      joinData.value = node.data
    }
  }
})
const handleEdit = () => {
  const node = getNode()
  const graph = antvStore.graph
  console.log(graph.toJSON())
  const edges = graph.getEdges().filter((item) => item.target.cell == node.id)
  const nodes = edges.map((item) => {
    return item.getSourceNode()
  })
  console.log(nodes)
  currentJoinNodes.value = nodes
  joinNodes.value = nodes.map((item) => {
    if (item.shape == 'custom-vue-table') {
      return item
    } else {
      return {
        ...item,
        data: {
          tableReName: item.data.joinName,
          condition: item.data.condition,
          fieldList: item.data.choosedFields.map((i) => {
            return { ...i, reName: i.joinReName }
          })
        }
      }
    }
  })
  console.log(joinNodes.value)
  isShowDialog.value = true
}
const joinCreate = (data) => {
  console.log(data)
  joinData.value = data
  const node = getNode()
  const graph = antvStore.graph
  console.log(node)
  node.setData({ ...data }, { deep: false })
  console.log(currentJoinNodes.value)
  // 将链接关系放到各自node的data中，方便后面拼json   joinName
  currentJoinNodes.value.forEach((item) => {
    if (item.shape == 'custom-vue-table') {
      const join = data.joinWhere.find((i) => i.join == item.data.tableReName)
      if (join)
        item.setData({
          sonJoinWhere: join
        })
    } else if (item.shape == 'custom-vue-join') {
      const join = data.joinWhere.find((i) => i.join == item.data.joinName)
      if (join)
        item.setData({
          sonJoinWhere: join
        })
    }
  })
  // 判断当前join节点是否链接结束节点
  const edge = graph
    .getEdges()
    .find((item) => item.source.cell == node.id && item.getTargetNode().shape == 'custom-vue-end')
  if (edge) {
    console.log(111)
    const targetNode = edge.getTargetNode()
    targetNode.setData(
      {
        fields: data.choosedFields
      },
      { deep: false }
    )
    console.log(targetNode, data)
  }
}
const handleDelete = () => {
  const graph = antvStore.graph
  graph.removeNode(getNode())
}
</script>

<style lang="scss" scoped>
.join-box {
  height: 100%;
  width: 100%;
  overflow: auto;
  .join-box-title {
    height: 100%;
    width: 100%;
    background-color: #fff;
    color: #e6a23c;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 3px solid #e6a23c;
    &:hover {
      background-color: #e5b163;
      color: #fff;
    }
  }
}
.box {
  height: 100%;
  width: 100%;
  background-color: #f9f9f9;
  box-shadow: 0 0 10px #ccc;
  border-radius: 10px;
  border: 2px solid #e6a23c;
  .header {
    padding: 10px;
    border-bottom: 1px solid #e6a23c;
    color: #e6a23c;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .btn {
      margin: 0 5px;
      cursor: pointer;
    }
  }
}
.box-content {
  height: calc(100% - 70px);
  overflow: auto;
  padding: 10px;
  .box-content-item {
    display: flex;
    div {
      &:nth-child(1) {
        width: 50px;
        text-align: right;
        color: #888;
      }
      &:nth-child(2) {
        width: calc(100% - 50px);
      }
    }
  }
  .el-tag {
    margin: 0 5px 5px 0;
    font-size: 16px;
  }
}
</style>
